import React, { Component } from "react";
import {
  Image,
  SectionList,
  Text,
  TextInput,
  TouchableWithoutFeedback,
  View,
  StyleSheet,
  ActivityIndicator,
} from "react-native";
import { height, statusBarHeight } from "../../util/apdater_util";
import * as RootNavigation from '../../../App';
import NetUtil from "../../net/net_util";

const SearchNavBar=({data,style,callback})=>{
  return (
    <View style={styles.navContainer}>
      <View style={styles.searchBox}>
        <Image style={styles.searchIcon} source={require('../../img/search_icon.png')}></Image>
        <TextInput style={styles.textInput} placeholder='搜一搜'></TextInput>
      </View>
      <TouchableWithoutFeedback onPress={callback}>
        <Text style={styles.cancel}>取消</Text>
      </TouchableWithoutFeedback>
    </View>
  )
}

export default class SelectTopic extends Component{
  constructor(props) {
    super(props);
    this.page={
      pageSize:10,
      pageNum:1
    };
    this.loading=false,
    this.state={
      isMoreLoading:true,
      sections:[
        { key: "我关注的", data: []},
        { key: "全部话题", data: []}
      ]
    }
  }

  componentDidMount() {
    this.getMyFocusTopicList()
    this.getAllTopicList()
  }

  /*获取我关注的话题*/
  getMyFocusTopicList(){
    NetUtil.get('trend/topic/my/topic',{},(res)=>{
      if(res.code==200){
        let sections=this.state.sections;
        sections[0].data=res.data
        this.setState({sections:[...sections]})
      }
    })
  }

  /*获取全部话题*/
  getAllTopicList(){
    let params={pageNum:this.page.pageNum,pageSize:this.page.pageSize}
    console.log(params)
    this.loading=true
    NetUtil.get('trend/topic/topic/page',params,(res)=>{
      this.loading=false
      console.log(res)
      if(res.code==200){
        let list=this.state.sections[1].data;
        if(this.page.pageNum==1){
          list=[]
        }
        list=list.concat(res.data.data)
        let sections=this.state.sections;
        sections[1].data=list
        this.setState({sections:[...sections],isMoreLoading:res.data.data.length<10?false:true})
      }
    })
  }

  _endReached(){
    if(!this.state.isMoreLoading||this.loading)return;
    this.page.pageNum++
    this.getAllTopicList()
  }

  /*选择某个话题*/
  selectTopic(item){
    let selectCallBack=this.props.route.params.callback;
    if(selectCallBack){
      selectCallBack(item)
    }
    this.props.navigation.pop()
  }

  _sectionFooter=(info)=>{
    let dataList=info.section.data
    if(dataList.length>0&&info.section.key=='我关注的'){
      return (
        <TouchableWithoutFeedback>
          <View>
            <View style={styles.footer}>
              <Text style={{color:'#888888',fontSize:12}}>查看全部</Text>
              <Image style={styles.enterIcon} source={require('../../img/enter_icon.png')}></Image>
            </View>
            {this._separator()}
          </View>
        </TouchableWithoutFeedback>
      )
    }
    else {
      return null
    }
  }

  _separator(){
    return <View style={{backgroundColor:'#F6F6F6',height:10}}></View>
  }

  _renderTopicCell=(info)=>{
    let item=info.item
    return (
      <TouchableWithoutFeedback onPress={()=>{this.selectTopic(item)}}>
        <View style={styles.cell}>
          <Image style={styles.topicIcon} source={{uri:item.thumb}}></Image>
          <View style={styles.topicInfo}>
            <Text style={{color:'#0F0F0F',fontSize:15,fontWeight:'500'}}><Text style={{color:'#3CA1FD',fontSize:15,fontWeight:'600'}}>#</Text>{item.name}</Text>
            <Text style={{color:'#A6A6A6',fontSize:11,marginTop:18}}>讨论 {item.trendNum}万</Text>
          </View>
        </View>
      </TouchableWithoutFeedback>
    )
  }
  _sectionComp = (info) => {
    let txt = info.section.key;
    let dataList=info.section.data
    if(dataList.length>0){
      return <Text
        style={{ height: 36,lineHeight:36,paddingLeft:15, textAlignVertical: 'center', backgroundColor: '#fff', color: '#777777', fontSize: 13 }}>{txt}</Text>
    }
    else{
      return null
    }
  }

  renderFooter(){
    if(this.state.isMoreLoading){
      return(
        <View style={{marginVertical: 10}}>
          <ActivityIndicator/>
        </View>
      )
    }else{
      return(
        <View style={{marginVertical: 10,justifyContent:'center',alignItems:'center'}}>
          <Text style={{color:'#999999'}}>没有更多了。</Text>
        </View>
      )
    }
  }

  _renderHeader=()=>{
    return(
      <View>
        <View style={{backgroundColor:'#F6F6F6',height:10}}></View>
        <TouchableWithoutFeedback onPress={()=>{this.selectTopic()}}>
          <View style={styles.header}>
            <Image style={{width:21,height:21}} source={require('../../img/jinzhi.png')}></Image>
            <Text style={{color:'#0F0F0F',fontSize:15,fontWeight:'500',marginLeft:11}}>不选择话题</Text>
          </View>
        </TouchableWithoutFeedback>
        <View style={{backgroundColor:'#F6F6F6',height:10}}></View>
      </View>
    )
  }

  render(){
    return (
      <View style={{height:'100%',backgroundColor:'#F6F6F6'}}>
        <SearchNavBar callback={()=>{this.props.navigation.pop()}}></SearchNavBar>
        <SectionList
          ListHeaderComponent={this._renderHeader}
          renderSectionHeader={this._sectionComp}
          renderSectionFooter={this._sectionFooter}
          renderItem={this._renderTopicCell}
          ListFooterComponent={()=>this.renderFooter()}
          onEndReachedThreshold = {0.1} //当距离内容比例不足内容0.1比例时触发onEndReached
          onEndReached = {this._endReached.bind(this)} //上拉加载数据
          showsVerticalScrollIndicator={false}
          keyExtractor={(item)=>item.id}
          sections={this.state.sections}>
        </SectionList>
      </View>
    )
  }
}

const styles=StyleSheet.create({
  navContainer:{
    backgroundColor:'#fff',
    height:statusBarHeight+44,
    paddingTop:statusBarHeight,
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'center'
  },
  searchBox:{
    backgroundColor: '#F6F7F9',
    height: 30,
    borderRadius:15,
    marginLeft:14,
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'center',
    flex:1
  },
  searchIcon:{
    marginLeft: 13,
    width: 13,
    height:13
  },
  textInput:{
    marginLeft:6
  },
  cancel:{
    color:'#000000',
    fontSize:14,
    width:60,
    height:44,
    lineHeight:44,
    textAlign:'center'
  },

  /**cell*/
  cell:{
    padding:15,
    backgroundColor:'#fff',
    flexDirection:'row',
    justifyContent:'flex-start'
  },
  knowledgeIcon:{
    width:115,
    height:65
  },
  info:{
    flex:1
  },
  infoIcon:{
    width:97,
    height:65,
    borderRadius: 7
  },
  infoFooter:{
    flexDirection:'row',
    justifyContent:'flex-start',
    alignItems:'center',
    marginTop:15
  },
  topicIcon:{
    width:55,
    height:55,
    borderRadius:7
  },
  topicInfo:{
    marginLeft:12
  },
  footer:{
    flexDirection:'row',
    justifyContent:'center',
    alignItems:'center',
    height:44,
    backgroundColor:'#fff'
  },
  enterIcon:{
    width:12,
    height:12,
    marginLeft:5
  },
  /**header*/
  header:{
    height:60,
    flexDirection:'row',
    justifyContent:'flex-start',
    alignItems:'center',
    paddingLeft:14,
    backgroundColor:'#fff'
  }
})
